<template>
  <div class="training-container">
    <!-- 顶部场景信息和进度 -->
    <div class="training-header">
      <div class="scene-info">
        <el-button @click="backToHome" icon="ArrowLeft">返回</el-button>
        <h2>{{ sceneName }}</h2>
        <div class="progress-info">{{ currentIndex + 1 }}/{{ totalExercises }}</div>
      </div>
      <el-progress :percentage="progress" />
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <div class="content-area">
        <slot></slot>
      </div>

      <!-- 底部操作按钮 -->
      <div class="action-buttons">
        <el-button @click="handlePrevious" :disabled="!canNavigatePrevious"> 上一题 </el-button>
        <el-button type="primary" @click="handleNext" :disabled="!canNavigateNext">
          {{ isLastExercise ? '完成' : '下一题' }}
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

interface Props {
  sceneName: string
  currentIndex: number
  totalExercises: number
  canNavigatePrevious?: boolean
  canNavigateNext?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  canNavigatePrevious: false,
  canNavigateNext: false,
})

const emit = defineEmits<{
  (e: 'previous'): void
  (e: 'next'): void
}>()

const progress = computed(() => {
  return Math.round(((props.currentIndex + 1) / props.totalExercises) * 100)
})

const isLastExercise = computed(() => {
  return props.currentIndex === props.totalExercises - 1
})

const backToHome = () => {
  router.push('/')
}

const handlePrevious = () => {
  emit('previous')
}

const handleNext = () => {
  emit('next')
}
</script>

<style scoped>
.training-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.training-header {
  margin-bottom: 30px;
}

.scene-info {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 15px;
}

.scene-info h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
}

.progress-info {
  color: #606266;
  font-size: 16px;
}

.exercise-type {
  margin-bottom: 20px;
}

.exercise-icon {
  margin-right: 5px;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 20px 0;
}

.action-buttons {
  margin-top: auto;
  padding: 20px 0;
  display: flex;
  justify-content: center;
  gap: 20px;
  background: #fff;
  border-top: 1px solid #ebeef5;
}

@media (max-width: 768px) {
  .training-container {
    padding: 10px;
  }

  .scene-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .action-buttons {
    padding: 15px 0;
  }
}
</style>
